<template>
  <div class="main-container">
    <Table
      ref="tableRef"
      :choiceColumn="true"
      :defaultSort="defaultSort"
      :columns="columns"
      :apiUrl="apiUrl"
      :permission="permission"
      :formData="formData"
      :showPage="true"
      :hasEditor="true"
      @openFormBefore="openFormBefore"
    >
      <template #noteContent="{ row }">
        <el-button type="primary" round plain @click="showNoteFun(row.noteContent)"
          >预览笔记</el-button
        >
      </template>
    </Table>
    <el-dialog class="noteDialog" v-model="showNote" title="小李笔记" append-to-body>
      <el-scrollbar height="70vh">
        <div v-html="showContent"></div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup name="ToolLabel">
import Table from "@/components/Table";
import { getNoteList, putNote, addNote, delNote, getNote } from "@/api/note";
import hljs from "highlight.js";
const { proxy } = getCurrentInstance();

const tableRef = ref();
const defaultSort = ref({ prop: "noteSort", order: "descending" });

const showContent = ref("");
const showNote = ref(false);
const showNoteFun = (noteContent) => {
  showContent.value = highlightCode(noteContent);
  showNote.value = true;
};

const columns = [
  {
    prop: "id",
    label: "编号",
    width: 100,
    align: "center",
  },
  {
    prop: "noteTitle",
    label: "笔记标题",
    align: "center",
  },
  {
    prop: "noteContent",
    label: "笔记内容",
    align: "center",
  },
  {
    prop: "noteSort",
    label: "排序",
    align: "center",
    sortable: "custom",
  },
  {
    prop: "createTime",
    label: "创建时间",
    align: "center",
    sortable: "custom",
  },
  {
    prop: "updateTime",
    label: "更新时间",
    align: "center",
    sortable: "custom",
  },
];
const menuList = ref([]);
const formData = reactive([
  {
    type: "input",
    label: "笔记标题",
    placeholder: "请输入笔记标题",
    prop: "noteTitle",
    default: "",
    width: "70%",
    searchShow: true,
    rules: [
      { required: true, message: "请输入笔记标题", trigger: "blur" },
      { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
    ],
  },
  {
    type: "number",
    label: "排序",
    placeholder: "请输入排序(从大到小)",
    prop: "noteSort",
    default: 1,
    width: "70%",
    searchShow: false,
    rules: [{ required: true, message: "请输入排序(从大到小)", trigger: "blur" }],
  },
  {
    type: "editor",
    label: "笔记内容",
    placeholder: "请输入笔记内容",
    prop: "noteContent",
    default: "",
    width: "70%",
    searchShow: false,
    rules: [{ required: true, message: "请输入笔记内容", trigger: "blur" }],
  },

  {
    type: "datetimerange",
    label: "创建时间",
    placeholder: ["筛选创建时间(开始点)", "创建时间(结束点)"],
    prop: "createTime",
    default: [],
    showRule: [],
    searchShow: true,
    width: "70%",
  },
]);

const apiUrl = {
  list: getNoteList,
  edit: putNote,
  add: addNote,
  del: delNote,
  get: getNote,
};

const permission = {
  add: "admin:note:add",
  edit: "admin:note:edit",
  del: "admin:note:del",
};
const openFormBefore = (val) => {};

// 高亮处理函数
const highlightCode = (html) => {
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = html;
  const codeBlocks = tempDiv.querySelectorAll("pre code");

  codeBlocks.forEach((block) => {
    hljs.highlightBlock(block); // 高亮代码块
    block.classList.add("hljs"); // 确保样式生效
  });
  return tempDiv.innerHTML;
};
</script>

<style scoped lang="scss"></style>
<style lang="scss"></style>
